<template>
	<div class="clearfloat padding-across-10" style="height:100%;margin-bottom: 100px" v-loading="loading" element-loading-text="拼命加载中">
		<div class="flash-object">
			<!-- <div class="previewModal" v-if="HKDevice.waitting">
				<i class="el-icon-loading"></i>
            </div> -->
			<!--<div id="record"></div>-->
			<template>
				<video-player class="vjs-custom-skin" ref="videoPlayer" :options="videoOptions" :playsinline="true" customEventName="customstatechangedeventname" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" @statechanged="playerStateChanged($event)">
				</video-player>
			</template>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery';
	import swf from '../../../../assets/js/swfobject.js'
	import headerOpreate from '../../../../components/headerOpreate'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import { Animation } from '../../../../assets/js/common.js'
	import noRecord from '../../../../assets/images/noRecord.jpg'

	import { videoPlayer } from 'vue-video-player'
	require('videojs-flash/dist/videojs-flash')
	require('video.js/dist/video-js.css')
	require('vue-video-player/src/custom-theme.css')

	var that = null;
	window['StartPlay'] = function(id) {
		//console.log(id);
		if(that) {
			//开始预览
			that.handleStartPlay();
		} else {
			console.error(that.$t('message.initializeFailed'));
		}
	}
	window['StopPlay'] = function(id) {
		if(that) {
			//停止预览
			that.handleStopPlay();
		} else {
			console.error(that.$t('message.initializeFailed'));
		}
	}
	window["recordGId"] = "";
	export default {
		components: {
			headerOpreate,
			videoPlayer
		},
		data() {
			return {
				isStop: false,
				HKDeviceDatas: '',
				HKDevice: {
					sn: '',
					ch: ''
				},
				videoOptions: {}
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: {}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			backPrev() {
				// this.$emit('changeView', "controlList", {})
			},
			//恢复预览
			onPlayerPlay(player) {
				if(this.isStop) {
					this.handleRecoveryPlay();
					this.isStop = false;
				}
			},
			//暂停预览
			onPlayerPause(player) {
				this.handlePausePlay();
				this.isStop = true;
			},
			// or listen state event
			playerStateChanged(playerCurrentState) {
			},

			handleStartPlay() {
				//开始预览处理
				var entry = {
					op: 3,
					ch: this.HKDevice.ch,
					sn: [this.templateObj.sn]
				}
				HttpServer.httpPost.call(this, '/Api/Peripheral/HKRecordSet', entry, function(response) {}, function(response) {
					if(response.data.code === 0) {
						//每隔4分钟调用一次接口
						this.heartBeat = setInterval(() => {
							HttpServer.httpPost.call(this, '/Api/Device/PreviewHeartbeat', {
								sn: [this.templateObj.sn]
							}, function(response) {}, function(response) {
								//					console.log(response)
							})
						}, 240000)
					}
				});
			},
			handleStopPlay() {
				//停止预览处理
				var entry = {
					op: 4,
					ch: this.HKDevice.ch,
					sn: [this.templateObj.sn]
				}
				HttpServer.httpPost.call(this, '/Api/Peripheral/HKRecordSet', entry, function(response) {}, function(response) {

				});
			},
			handlePausePlay() {
				//暂停预览处理
				var entry = {
					op: 5,
					ch: this.HKDevice.ch,
					sn: [this.templateObj.sn]
				}
				HttpServer.httpPost.call(this, '/Api/Peripheral/HKRecordSet', entry, function(response) {}, function(response) {

				});
			},
			handleRecoveryPlay() {
				//恢复预览处理
				var entry = {
					op: 6,
					ch: this.HKDevice.ch,
					sn: [this.templateObj.sn]
				}
				HttpServer.httpPost.call(this, '/Api/Peripheral/HKRecordSet', entry, function(response) {}, function(response) {

				});
			},
			//获取监控详情
			getHKDeviceDetail() {
				HttpServer.httpGet.call(this, '/Api/HKRecord/Get/Status/' + this.templateObj.sn, function(response) {}, function(response) {
					if(response.data.code === 0) {
						this.HKDevice.ch = response.data.data.no;
						this.videoOptions = {
							techOrder: ['flash'], // 兼容顺序
							muted: true,
							sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
								type: "rtmp/mp4",
								src: response.data.data.url
							}],
							language: 'zh-CN',
							controls: true,
							autoplay: true,
							height: 580
						}
						//推流成功之后查询一次心跳包
						HttpServer.httpPost.call(this, '/Api/Device/PreviewHeartbeat', {
							sn: [this.templateObj.sn]
						}, function(response) {}, function(response) {
							//				console.log(response)
							this.handleStartPlay();
						})
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
		},
		created() {
			this.getHKDeviceDetail();
		},
		beforeDestroy() {
			clearInterval(this.heartBeat);
			this.handleStopPlay();
		}
	}
</script>

<style scoped>
	@import '../../../../assets/css/font-awesome-4.7.0/css/font-awesome.css';
</style>
<style scoped lang="less">
	@import '../../../../assets/css/media-screen.less';
</style>

<style scoped lang="less">
	* {
		box-sizing: border-box;
	}
	
	.flash-object {
		// margin: 5px 0;
		height: 580px;
		// height: e("calc(100% - 40px)");
		// position: relative;
		.previewModal {
			background-color: #eee;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			text-align: center;
			i {
				font-size: 50px;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				width: 50px;
				height: 50px;
				margin: auto;
			}
		}
	}
</style>